<script setup>
import {ref} from 'vue'
import {UploadFilled} from '@element-plus/icons-vue'
import { userStore } from "@/stores/userStore.js";
import http from "@/utils/http.js";
import {ElMessage} from "element-plus";

const rules = {
//el-form-item 必须通过 prop 指定当前表单项绑定的是 form 对象的哪个字段
//这样 rules 才能正确匹配校验规则。
  goodsName: [
    {required: true, message: '请输入商品名', trigger: 'blur'},
    {min: 1, max: 20, message: '长度为1 ~ 20位非空字符', trigger: 'blur'}
  ],
  goodsPrice: [
    {required: true, message: '请输入商品价格', trigger: 'blur'},
    {min: 1, max: 20, message: '长度为1 ~ 20位非空字符', trigger: 'blur'}
  ],
  goodsDesc: [
    {required: true, message: '请输入商品描述', trigger: 'blur'},
    {min: 1, max: 100, message: '长度为1 ~ 100位非空字符', trigger: 'blur'}
  ],
  goodsAddress: [
    {required: true, message: '请输入发货地', trigger: 'blur'},
    {min: 1, max: 20, message: '长度为1 ~ 20位非空字符', trigger: 'blur'}
  ]
}
const uStore = userStore()
const fRef = ref()
const form = ref({
  goodsName: '',
  goodsPhoto: '',
  goodsPrice: '',
  goodsDesc: '',
  goodsAddress: ''

})
const handleSuccess = (res) => {
  form.value.goodsPhoto = res.data
}
const onSubmit = async () => {
    fRef.value.validate(async valid => {
    if (valid) {
      let addTemp = {
        goods: {
          goodsName: form.value.goodsName,      // 字段名 goodsName
          goodsPhoto: form.value.goodsPhoto,    // 字段名 goodsPhoto
          goodsPrice: form.value.goodsPrice,    // 字段名 goodsPrice
          goodsDescription: form.value.goodsDesc, // 字段名 goodsDescription
          goodsAddress: form.value.goodsAddress // 字段名 goodsAddress
        },
        userId: uStore.userInfo.data.userId
      }

      const res = await http.post('/goods/add', addTemp)

      if (res.code === 666) {
        ElMessage({type: 'success', message: '上传成功，待管理员审核'})

        form.value = {      //将数据置空方便用户下一次填写
          goodsName: '',
          goodsPhoto: '',
          goodsPrice: '',
          goodsDesc: '',
          goodsAddress: ''
        }
      }
    }
  })

}
</script>

<template>
    <div class="home-goods">
<el-form ref="fRef" :model="form" label-width="auto" style="max-width: 600px" :rules="rules">
    <div style="margin-top: 20px"><h2 style="text-align: center">商 品 发 布</h2></div>
    <el-form-item label="商品名称" prop="goodsName">
      <el-input v-model="form.goodsName" />
    </el-form-item>

    <el-form-item label="商品价格" prop="goodsPrice">
      <el-input v-model="form.goodsPrice" />
    </el-form-item>

    <el-form-item label="发货地址" prop="goodsAddress">
      <el-input v-model="form.goodsAddress" />
    </el-form-item>

    <el-form-item label="商品图片">
          <el-upload
              class="upload-demo"
              drag
              name="photo"
              action="http://localhost:8080/goods/upload"
              :auto-upload = "true"
              :on-success="handleSuccess"
              multiple
          >
            <el-icon class="el-icon--upload">
              <upload-filled/>
            </el-icon>
            <div class="el-upload__text">
              将文件拖放到此处或<em>点击上传</em>
            </div>
          </el-upload>
    </el-form-item>

    <el-form-item label="商品描述"  prop="goodsDesc">
      <el-input v-model="form.goodsDesc" type="textarea" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
</el-form>
</div>
</template>
    

<style scoped>
.home-goods {
  background: #fff;
  height: 666px;
  margin-top: 30px;
  margin-left: 500px;
  margin-right: 200px;
}
</style>

